@ChatItemHeight: 60px;
@tipPadding: 12px;

.selected {
    .chat-item {
        background: #E0F0FD;
    }
}

.chat-item {
    user-select: none;
    display    : flex;
    width      : 100%;
    height     : @ChatItemHeight;
    max-width  : 250px;
    align-items: center;
    padding-right: 12px;
    border:none;
    border-bottom: 1px solid #EFEFEF;
    position: relative;
    &.top::after{
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        border-left: 12px solid transparent;
        border-top: 12px solid #d6d6d6;
        width: 0;
        height: 0;
    }
    &:hover {
        background: #E0F0FD;
    }

    .avator-wraper {
        // padding: 8px 6px @tipPadding;
        width     : @ChatItemHeight;
        text-align: center;
        position: relative;

        img {
            max-width : 100%;
            max-height: 100%;
        }

        .ant-badge-count {
            transform: scale(.8, .8);
            right    : -6px;
        }
        .sub-num{
            position: absolute;
            top: -6px;
            right: 2px;
            display: block;
            height: 16px;
            width: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 8px;
            background: red;
            color: #fff;
            font-size: 10px;
        }
    }

    .right {
        display        : flex;
        flex           : 1;
        flex-direction : column;
        justify-content: center;
        // padding        : 0 @tipPadding 0;
        font-size      : 12px;
        color          : rgba(150, 155, 165, 1);
        overflow       : hidden;

        .right-top {
            display        : flex;
            justify-content: space-between;
            margin-bottom  : 4px;
        }

        .title {
            font-size    : 14px;
            // font-family  : AlibabaPuHuiTiR;
            // font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
            color        : rgba(44, 47, 54, 1);
            max-width    : 60%;
            overflow     : hidden;
            text-overflow: ellipsis;
            white-space  : nowrap;
        }
    }
}

.content-mes {
    overflow     : hidden;
    max-width    : 90%;
    text-overflow: ellipsis;
    min-height   : 18px;
    white-space  : nowrap;
    .content-mes-notice{
        position: absolute;
        right: 10px;
        top: 34px;
        max-width: 15px;
        max-height: 15px;
    }
    .message-sendtextemoj-style{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}